<template>
  <el-dialog
    :visible.sync="visible"
    :title="title"
    :width="width"
    :fullscreen="fullscreen"
    :top="top"
    :modal="modal"
    :modal-append-to-body="modalAppendToBody"
    :append-to-body="appendToBody"
    :lock-scroll="lockScroll"
    :custom-class="customClass"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :before-close="beforeClose"
    :center="center"
    :destroy-on-close="destroyOnClose"
    @open="handleOpen"
    @close="handleClose"
  >
    <!-- 弹窗内容（支持插槽自定义） -->
    <slot name="content">
      <!-- 默认内容区域，可通过 props 传入文本内容 -->
      <div v-if="content" class="default-content">{{ content }}</div>
    </slot>

    <!-- 底部按钮区域（支持插槽自定义） -->
    <slot name="footer">
      <div v-if="!hideFooter" class="dialog-footer">
        <!-- 取消按钮 -->
        <el-button
          v-if="showCancelBtn"
          :size="btnSize"
          :type="cancelBtnType"
          @click="handleCancel"
        >
          {{ cancelBtnText }}
        </el-button>

        <!-- 确认按钮 -->
        <el-button
          v-if="showConfirmBtn"
          :size="btnSize"
          :type="confirmBtnType"
          :loading="confirmLoading"
          @click="handleConfirm"
        >
          {{ confirmBtnText }}
        </el-button>
      </div>
    </slot>
  </el-dialog>
</template>

<script>
export default {
  name: "FlexibleDialog",
  props: {
    // 控制弹窗显示/隐藏（支持 .sync 修饰符）
    visible: {
      type: Boolean,
      default: false,
    },
    // 弹窗标题
    title: {
      type: String,
      default: "提示",
    },
    // 弹窗宽度（如 '50%' 或 '600px'）
    width: {
      type: String,
      default: "50%",
    },
    // 是否全屏
    fullscreen: {
      type: Boolean,
      default: false,
    },
    // 弹窗距离顶部的距离
    top: {
      type: String,
      default: "15vh",
    },
    // 是否显示遮罩层
    modal: {
      type: Boolean,
      default: true,
    },
    // 遮罩层是否插入到 body 中
    modalAppendToBody: {
      type: Boolean,
      default: true,
    },
    // 弹窗是否插入到 body 中
    appendToBody: {
      type: Boolean,
      default: true,
    },
    // 是否锁定滚动
    lockScroll: {
      type: Boolean,
      default: true,
    },
    // 自定义类名
    customClass: {
      type: String,
      default: "",
    },
    // 点击遮罩层是否关闭弹窗
    closeOnClickModal: {
      type: Boolean,
      default: true,
    },
    // 按 ESC 键是否关闭弹窗
    closeOnPressEscape: {
      type: Boolean,
      default: true,
    },
    // 是否显示关闭按钮
    showClose: {
      type: Boolean,
      default: true,
    },
    // 关闭前的回调（返回 false 可阻止关闭）
    beforeClose: {
      type: Function,
      default: null,
    },
    // 标题和底部是否居中
    center: {
      type: Boolean,
      default: false,
    },
    // 关闭时是否销毁弹窗内容
    destroyOnClose: {
      type: Boolean,
      default: false,
    },
    // 默认内容（简单文本内容时使用，复杂内容建议用插槽）
    content: {
      type: String,
      default: "",
    },
    // 是否隐藏底部按钮区域
    hideFooter: {
      type: Boolean,
      default: false,
    },
    // 是否显示取消按钮
    showCancelBtn: {
      type: Boolean,
      default: true,
    },
    // 取消按钮文本
    cancelBtnText: {
      type: String,
      default: "取消",
    },
    // 取消按钮类型（primary / success / warning / danger / info / text）
    cancelBtnType: {
      type: String,
      default: "text",
    },
    // 是否显示确认按钮
    showConfirmBtn: {
      type: Boolean,
      default: true,
    },
    // 确认按钮文本
    confirmBtnText: {
      type: String,
      default: "确定",
    },
    // 确认按钮类型
    confirmBtnType: {
      type: String,
      default: "primary",
    },
    // 按钮尺寸（medium / small / mini）
    btnSize: {
      type: String,
      default: "small",
    },
    // 确认按钮是否加载中
    confirmLoading: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    // 取消按钮回调
    handleCancel() {
      this.$emit("cancel");
      this.$emit("update:visible", false);
    },
    // 确认按钮回调
    handleConfirm() {
      this.$emit("confirm");
    },
    // 弹窗打开时回调
    handleOpen() {
      this.$emit("open");
    },
    // 弹窗关闭时回调
    handleClose() {
      this.$emit("close");
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style scoped>
.default-content {
  padding: 10px 0;
  line-height: 1.6;
}
.dialog-footer {
  text-align: right;
}
/* 可自定义按钮间距 */
::v-deep .dialog-footer .el-button {
  margin-left: 8px;
}
</style>
